<template>
    <div class="loginForm">
        <h2>账号登录</h2>
        <input class="input" type="text" v-model="loginData.username" placeholder="请输入账号">
        <input class="input" type="password" v-model="loginData.password" placeholder="请输入密码">
        <div class="submit" @click="toLogin2">登录</div>
    </div>
</template>

<script>
import { getAdminState, getAdminLoginUrl } from "@/api/common.js";
import storage from '@/plugins/storage.js';
export default {
    name: '',
    data() {
        return {
            isShowlogin: false,
            loginData: {
                username: '',
                password: '',
            },
        }
    },
    methods: {
        toLogin2() {
            getAdminState(this.loginData).then((res) => {
                // console.log(res, 'app');
                if (res.code === 0) {
                    this.$Message.error(res.msg);
                } else {
                    this.$Message.error('登录成功');
                    let token = res.data.token;
                    // console.log(token);
                    this.userName = res.data.username
                    this.isShowlogin = false
                    this.$emit('loginShowFn', { isShowlogin: this.isShowlogin, userinfo: res.data })
                    storage.setItem("newToken", token);
                    storage.setItem("userName", res.data.username);
                }
            });
        }
    }
}
</script>

<style scoped lang="scss">
.loginForm {
    width: 200px;
    height: 200px;
    background-color: rgba($color: #000000, $alpha: 0);
    display: flex;
    padding: 0 10px;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
    color: #fff;

    h2 {
        font-size: 24px;
    }

    .input {
        width: 180px;
    }

    .submit {
        background-color: #028fcc;
        font-size: 20px;
        color: #fff;
        padding: 0 12px;
        border-radius: 5px;
    }
}
</style>